import vuedraggable from "vuedraggable";
import {makeid} from "../utils";

import toPairs from 'lodash/toPairs'
function objToAttr(obj) {
  let _pairs = toPairs(obj)
  return _pairs.map(v => {
    return `${v[0]}="${v[1]}"`
  }).join(' ')
}

function getAttributeObj(attributesNodeMap) {
  let obj = {}
  for(let i=attributesNodeMap.length-1; i>=0; i--) {
    obj[attributesNodeMap[i].name] = attributesNodeMap[i].value
  }
  return obj
}

function getAttributeStr(attributesNodeMap) {
  return objToAttr(getAttributeObj(attributesNodeMap))
}

let textareainput = () => {
  return `
    <textarea 
    v-if="myArray.length < 1"
    style="${textareaStyle}; height: 300px;" @input="onInput"></textarea>
  `
}

window.globalArrayInputContext = null
document.addEventListener('keydown', (event) => {
  const keyName = event.key;
  // console.log(keyName, event.ctrlKey)

  if (keyName === 'Control') {
    // do not alert when only Control key is pressed.
    return;
  }

  if (event.ctrlKey) {
    if (keyName.toLowerCase() === 's') {
      if (window.globalArrayInputContext) {
        window.globalArrayInputContext.compile()
      }
    }
  } else {
    // console.log(`Key pressed ${keyName}`);
  }
}, false);


export default function (options) {
  return {
    components: {
      vuedraggable
    },
    template: (() => {
      let textareaStyle="display: block; width: 100%; padding: 0;"
      return `
<div class="array-input">
  <textarea style="${textareaStyle}; height: 0; border: none; " v-model="getArrayStr"></textarea>
  <template
      v-if="myArray.length > 0"
  >
    <vuedraggable 
       v-model="myArray"
       draggable=".prop-drag"  
     >
      <transition-group>
        <div style="padding: 10px 0; border: 1px solid #eee;"
             v-for="(element, index) in myArray" :key="element.id">
          <div style="display: flex">
<!--            <div>{{element.name}}</div>-->
            <slot name="item" v-bind:item="element"></slot>
            <div><button @click="del(index)">del</button></div>
          </div>
        </div>
      </transition-group>
    </vuedraggable>
  </template>
    <come-prop :showinput="showinput" @change="addProp"></come-prop>
<!-- <el-button size="small" @click="addProp">add a prop</el-button>-->
</div>
  `
    })(),
    props: {
      showinput: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        myArray: []
      }
    },
    computed: {
      getArrayStr(newVal) {
        // console.log('display: block; width: 100%; padding: 0;', this.$emit)
        let v = options.getArrayStr(this.myArray, this)
        this.$emit('input', v)
        return v
      },
    },
    watch: {
      myArray(newVal) {
        this.$emit('input', this.getArrayStr)
      }
    },
    methods: {
      onInput(e) {
        let value = e.target.value + ''
        e.target.value = ''
        this.genMyArray(value)
      },
      addProp(propName) {
       this.$emit('add', {propName, context: this})
      },
      del(index) {
        this.myArray.splice(index, 1)
        // console.log('ondel', this.getArrayStr)
        this.$emit('del', this.getArrayStr)
      },
      genMyArrayCore(value) {
        let _arr = []
        let _value = value.trim()
        if (_value.endsWith(';')) {
          _value = _value.slice(0, _value.length - 1)
        }
        if (options.parseToArr) {
          _arr = options.parseToArr(_value, makeid)
        } else{
          let div = document.createElement('div')
          div.innerHTML =  _value
          Array.prototype.slice.call(div.children).forEach(item => {
            // console.dir(item.attributes)
            _arr.push({
              id: makeid(10),
              name: item.hasAttributes() ? getAttributeStr(item.attributes) : ''
            })
          })
        }
        return _arr
      },
      addMyArray(value) {
        let arr = this.genMyArrayCore(value)
        this.myArray = this.myArray.concat(arr)
      },
      genMyArray(value) {
        this.myArray = this.genMyArrayCore(value)
      }
    }
  }
}

/**
<img src="http://10.10.10.150:7001/1" a="1" />
<img src="http://10.10.10.150:7001/2" a="1" />
<img src="http://10.10.10.150:7001/3" a="1" />

 http://10.10.10.150:7001/1, http://10.10.10.150:7001/2, http://10.10.10.150:7001/3
 */
